<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }

        ul{
            width: 800px;
            border: 10px solid red;
            display: inline-flex;
            flex-direction: row;
        }

        li{
            width: 100px;
            height: 100px;
            font-size: 50px;
            text-align: center;
            background-color: rgb(128, 196, 112);
            line-height: 100px;

            /* 
                弹性元素的属性：
                    flex-direction
                    
                    flex-grow: 1;  -  元素放大的倍数
                    - 当父元素有多余空间的时，子元素如何伸展
                    - 父元素的剩余空间，会按照比例进行分配
                    flex-shrink: 1;  -  元素缩小的倍数
                    - 当父元素中的空间不足以容纳所有的子元素时，如果对子元素进行收缩
                    flex-wrap 设置弹性元素是否在弹性容器中自动换行
                        - nowrap  -  默认值，子元素不会换行
                        - wrap  -  子元素会换行
                        - wrap-reverse  -  子元素会换行，但是换行方向是相反的

                    flex-flow  wrap 和 direction 的简写属性
                    flew-flow: row wrap;
            */

            /*
                justify-content 
                    - 如何分配主轴上的空白空间（主轴上的元素如何排列）
                    - 可选值：
                        flex-start  -  默认值，元素在主轴的开始位置
                        flex-end  -  元素在主轴的结束位置
                        center  -  元素在主轴的中间位置
                        space-between  -  元素在主轴上均等间隔排列
                        space-around  -  元素在主轴上均等间隔排列，但第一个元素和最后一个元素与主轴的开始和结束位置相同
                        space-evenly  -  元素在主轴上均等间隔排列，但第一个元素和最后一个元素与主轴的开始和结束位置相同
            */
        }

        li:nth-child(1){ 
            flex-grow: 0;
            background-color: #bfa;
        }

        li:nth-child(2){
            flex-grow: 2;
            background-color: pink;
        }

        li:nth-child(3){
            flex-grow: 3;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <!-- 
        flex 弹性盒、伸缩盒
            - 是CSS中弹性布局的实现方式，主要用来代替浮动来完成页面的布局
            - flex 可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变
            - 弹性容器
                - 要使用弹性盒，必须先将一个元素设置为弹性容器，通过设置弹性容器的样式，来控制弹性盒的排列方式
                - display: flex;  设置块级弹性容器
                - display: inline-flex;  设置行内弹性容器

            - 弹性元素
                - 弹性容器的子元素是弹性元素（弹性项）
                - 一个元素可以同时是弹性容器和弹性元素

        flex-direction 指定容器中弹性元素的排列方式
            可选值：
                row  -  默认值，水平排列
                row-reverse  -  水平排列，元素从右向左排列
                column  -  垂直排列
                column-reverse  -  垂直排列，元素从下向上排列

            主轴：
                弹性元素的排列方向称为主轴
            侧轴：
                与主轴垂直的轴
    -->
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
</html>